<template>
  <div class="color">
    <div class="content gwgk">
      <div class="right xwzx">
        <div class="inner">
          <div v-if="this.$router.history.current.query.orderId == '活动预告'" class="title">
            <p>活动预告</p>
          </div>

          <div v-if="this.$router.history.current.query.orderId == '文博讲座'" class="title">
            <p>文博讲座</p>
          </div>

          <div>
            <div class="flex_top">
              <div class="lz_left" style="width:352px;height:242px;">
                <img v-if="message" :src="IP + message[0].thumb" alt />
              </div>
              <div class="lz_right">
                <p class="content1">
                  <span>活动名称&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                  <span class="title1">{{ message[0].name }}</span>
                </p>
                <p class="content1">
                  <span>活动时间&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                  <span>{{ message[0].startdate }}-{{ message[0].enddate }}</span>
                </p>
                <p class="content1">
                  <span>报名时间&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                  <span>
                    {{ message[0].applystartdate }}-{{
                    message[0].applyenddate
                    }}
                  </span>
                </p>
                <p class="content1">
                  <span>活动地点&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                  <span>{{ message[0].address }}</span>
                </p>
                <p class="content1">
                  <span>联系电话&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                  <span>{{ message[0].tel }}</span>
                </p>

                <p class="content1">
                  <span>剩余票数&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                  <span>{{ message[0].balance2 }}</span>
                </p>

                <!-- <p
                  class="more"
                  v-if="!item.appEndDate&&!item.appStartDate"
                  @click="tankuang(index2,message[0].name)"
                >立即报名</p>
                <p class="more" v-if="item.appEndDate">报名截止</p>
                <p class="more" v-if="item.appStartDate">活动未开始</p>-->
                <p
                  class="gray"
                  :class="{ more: message[0].button_zi == '立即报名' }"
                  v-if="message[0].sumCount != 0"
                  @click="
                    tankuang(index2, message[0].name, message[0].button_zi)
                  "
                >{{ message[0].button_zi }}</p>
                <!-- <hdtankuang></hdtankuang> -->
              </div>
              <div class="tankuang_bg">
                <el-dialog :visible="k_show" :center="true" @close="Close()">
                  <div>
                    <div class="content_k">
                      <p class="content_k_title">活动报名</p>
                      <ul>
                        <li class="input_bg">
                          <label for>活&nbsp;&nbsp;&nbsp;动</label>
                          <input v-model="hd_title" type="text" />
                        </li>
                        <li class="input_bg">
                          <label for>姓&nbsp;&nbsp;&nbsp;名</label>
                          <input type="text" v-model="name" />
                        </li>
                        <li class="input_bg">
                          <label for>电&nbsp;&nbsp;&nbsp;话</label>
                          <input type="text" v-model="realMobile" />
                        </li>
                        <li class="input_bg">
                          <label for>邮&nbsp;&nbsp;&nbsp;箱</label>
                          <input type="text" v-model="email" />
                        </li>

                        <li class="yanzhengma">
                          <label for>验证码</label>
                          <input type="text" v-model="yzm" />
                          <div
                            class="ValidCode disabled-select"
                            style="height:50px;width:100px;display:flex"
                            @click="refreshCode"
                          >
                            <span
                              v-for="(item, index) in codeList"
                              :key="index"
                              :style="getStyle(item)"
                            >{{ item.code }}</span>
                          </div>
                          <!-- <div class="shuzi" v-html="toyzm1"></div> -->

                          <span class="tip" @click="refreshCode">看不清 换一张</span>
                        </li>
                      </ul>
                      <p class="btn" @click="submit()">点击完成</p>
                    </div>
                  </div>
                </el-dialog>
              </div>
            </div>
            <div class="title_top">
              <p class="xwzx_title">{{ message[0].name }}</p>
              <span class="xwzx_second_title">
                编辑：{{ message[0].bianji }}&nbsp;
                &nbsp;&nbsp;&nbsp;发布时间：{{ message[0].releaseTime }}
              </span>
            </div>
            <span class="xwzx_second_title" v-html="message[0].zhengwen"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { JudgeLogin } from "../../api/login";
import { replaceImg, replaceA, replaceVideo } from "../../api/replace";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      message: [{ thumb: "" }],
      codeList: [],
      yzm: "",
      name: "",
      active: "",
      realMobile: "",
      email: "",
      year: "",
      sfz: "",
      hd_title: "",
      time: "",
      balance: "",
      k_show: false, //弹框
      index2: this.$router.history.current.query.index,
    };
  },

  created() {
    this.lookdetail(this.$router.history.current.query.id);
    this.createdCode();
  },
  mounted() {
    this.lookdetail(this.$router.history.current.query.id);
  },

  methods: {
    ...mapActions(["hdShow", "hdHide", "isShow"]),
    // 验证码
    refreshCode() {
      this.createdCode();
    },
    createdCode() {
      const len = 4;
      const codeList = [];
      const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
      const charsLen = chars.length;

      // 生成
      for (let i = 0; i < len; i++) {
        const rgb = [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 240),
          Math.round(Math.random() * 200),
        ];
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${
            Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)
          }deg)`,
        });
      }
      // 指向
      this.codeList = codeList;

      // 将当前数据派发出去
      this.$emit("update:value", codeList.map((item) => item.code).join(""));
    },
    getStyle(data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
    },
    //渲染详情页
    lookdetail(id) {
      this.$api.get(`${this.book}vol/events?catid=33&id=${id}`).then((res) => {
        let self = this;
        res.data.list.forEach((item) => {
          // console.log(item, "detail");
          this.$api
            .get(`${this.zs}/huodong/yugao/balance/count?id=${id}`)
            .then((res) => {
              self.$set(item, "balance2", res.data.data.balance);
              self.$set(item, "appEndDate", res.data.data.appEndDate);
              self.$set(item, "appStartDate", res.data.data.appStartDate);
              //
              self.$set(item, "sumCount", res.data.data.sumCount);
              self.$set(item, "apply", res.data.data.apply);
              self.$set(item, "appStartDate", res.data.data.appStartDate);
              self.$set(item, "appEndDate", res.data.data.appEndDate);
              //按钮里面的字
              if (item.appStartDate == false && item.appEndDate == true) {
                self.$set(item, "button_zi", "报名未开始");
              } else if (item.appStartDate == true && item.appEndDate == true) {
                self.$set(item, "button_zi", "立即报名");
              } else if (item.balance <= 0) {
                self.$set(item, "button_zi", "讲座已无票");
              } else {
                self.$set(item, "button_zi", "报名已结束");
              }
            });
        });
        var pic = res.data.list[0].zhengwen;
        var newPic = replaceImg(pic);
        var video = replaceVideo(newPic);
        var a = replaceA(video);
        res.data.list[0].zhengwen = a;
        this.message = res.data.list;

        this.message.forEach((item) => {
          this.$set(
            item,
            "startdate",
            item.startdate.slice(0, item.startdate.length - 9)
          );
          this.$set(
            item,
            "enddate",
            item.enddate.slice(0, item.enddate.length - 9)
          );
          this.$set(
            item,
            "applystartdate",
            item.applystartdate.slice(0, item.applystartdate.length - 9)
          );
          this.$set(
            item,
            "applyenddate",
            item.applyenddate.slice(0, item.applyenddate.length - 9)
          );
        });
      });
    },
    submit() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          let active = this.active;
          let yzm = this.yzm;
          let num = /^[1]([3-9])[0-9]{9}$/;
          let str = [];
          this.codeList.forEach((item) => {
            str.push(item.code);
          });
          let arr = str.join(""); //按照(什么方式)空格拼接

          if (yzm.toLowerCase() != arr.toLowerCase()) {
            this.$message({
              message: "验证码错误",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            return;
          }

          this.$api
            .get(
              `${this.zs}/huodong/yugao/apply?id=${this.$router.history.current.query.id}`
            )
            .then((res) => {
              (this.yzm = ""), this.createdCode();

              if (res.data.success == true) {
                this.$message({
                  message: "活动预约成功",
                  type: "success",
                  duration: 1000,
                  offset: 320,
                });
                this.lookdetail(this.$router.history.current.query.id);
              } else {
                this.$message({
                  message: res.data.msgDetail,
                  type: "error",
                  duration: 1000,
                  offset: 320,
                });
                this.k_show = false;
              }
            });
        }
      });
    },
    tankuang(index2, name, btn) {
      if (btn != "立即报名") return;
      this.createdCode();
      this.hd_title = name;

      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          this.k_show = true;
          this.name = res.info.name;
          this.realMobile = res.info.realMobile;
          this.email = res.info.email;
        }
      });
    },
    Close() {
      this.k_show = false;
    },
  },
  computed: {
    ...mapState(["showActivity"]),
  },
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}
.color {
  color: #4e4b4b;
}

.gwgk.content {
  display: flex;
  justify-content: space-between;

  max-width: 1200x;

  margin: auto;
  line-height: 40px;

  box-sizing: border-box;
  padding-bottom: 50px;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
  margin-bottom: 50px;
}
.title > p {
  margin-bottom: 10px;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

.gwgk .right {
  width: 980px;
  padding: 0 30px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*馆务公开 新闻咨询 */
.gwgk span {
  display: block;
}
.title_top {
  text-align: center;
}
.xwzx_title {
  color: #060606;
  font-size: 24px;
  margin-top: 20px;
}
.xwzx_second_title {
  font-size: 16px;
  color: #3e3e3e;
  margin-bottom: 10px;
}
.ziti {
  font-size: 16px;
  color: #666666;
}
/* baoming */

.lz_right {
  width: 600px;
  box-sizing: border-box;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.place {
  height: 150px;
  font-size: 18px;
  line-height: 35px;
  color: #666666;
}
.gray {
  font-size: 16px;
  margin-bottom: 10px;
  align-self: flex-end;
  cursor: pointer;
  background: #bebebe;
  color: white;
  width: 160px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}
.more {
  font-size: 16px;
  margin-bottom: 10px;
  align-self: flex-end;
  cursor: pointer;
  background: #0000ff;
  color: white;
  width: 160px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}
.content1 {
  font-size: 16px;
  line-height: 1;
  color: #666666;
  display: flex;
}

.title1 {
  color: #333333;
  font-size: 20px;
  margin-bottom: 10px;
}

.table {
  margin-bottom: 100px;
}
.flex_top {
  display: flex;
  border-bottom: 2px solid gray;
  padding-bottom: 80px;
  margin-bottom: 30px;
}
/* yzm */
.tankuang_bg .content_k {
  width: 565px;
  text-align: center;
  padding-bottom: 40px;
}
.tankuang_bg >>> .el-dialog {
  width: 550px;
}
.tankuang_bg >>> .el-dialog--center .el-dialog__body {
  padding: 0px;
  width: 460px;
}
.content_k_title {
  margin-bottom: 41px;
  font-size: 24px;
}
.content_k ul {
  margin: auto;
}
.content_k li {
  margin-bottom: 40px;
}
.content_k .input_bg input {
  outline: none;
  width: 350px;
  height: 33px;
  border: none;
  box-sizing: border-box;
  padding-left: 20px;
  background: #f3f3f3;
}
.content_k li label {
  margin-right: 50px;
  font-size: 18px;
}

.yanzhengma {
  display: flex;
  box-sizing: border-box;
  padding: 0 45px;
  justify-content: space-between;
  margin-bottom: 55px;
}
.yanzhengma p {
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.yanzhengma input {
  width: 100px;
  height: 35px;
  margin-right: 10px;
}
.shuzi {
  width: 60px;
  height: 35px;
  background: cadetblue;
  margin-right: 10px;
}
.btn {
  background: url("../../assets/image/ljbm.png") no-repeat;
  width: 375px;
  height: 60px;
  text-align: center;
  margin: auto;
  line-height: 60px;
  cursor: pointer;
  color: white;
  font-size: 18px;
}
</style>
